<style lang="less">
    .Detail {
        &-circle{
            border-radius: 50%;
            width: 30px;
            height: 30px;
            background: #1e88c7;
            line-height: 30px;
            text-align: center;
            align-self: center;
            color: #FCF5F5;
        }
        &-num{
            height: 30px;
            line-height: 30px;
            font-size: 20px;
        }
        &-parent{
            margin-left:auto;
            margin-right: auto;
            margin-top: 7px;
        }
    }
</style>

<template>

    <div class="Detail-parent" :style="{width: '60%','display':isContentShow}">
        <Row type="flex" justify="space-between" >
            <div class="Detail-num"><b>{{ num }}</b></div>
            <div class="Detail-circle" :style="{background:`${circleBackgroundColor[type]}`,visibility:isIconShow} " >{{ circleText[`${type}`]}}</div>
        </Row>
        <Row type="flex" justify="space-between" style="margin-left: 10px;margin-right: 10px" :style="{visibility:isTimeShow_Str}">
            <label>{{ from }}</label>
            <label>-</label>
            <label>{{to}}</label>
        </Row>
    </div>
</template>

<script>
    import { oneOf } from '../../../../node_modules/iview/src/utils/assist';
    export default {

        name: 'DateCell',
        props: {
            type: {
                validator (value) {
                    //0 正常 1 早退 2 迟到 3 缺勤 4 休息(包括双休和休假)
                    return oneOf(value+'', ['-1','0','1', '2', '3','4','5']);
                }
            },
            num:[String,Number],
            from:String,
            to:String,
            isTimeShow:{
                type:[String,Number],
                default:'1'
            },
            currentMonth:{
                type:Boolean,
                default:true
            },
        },
        computed:{
            isContentShow:function () {
                if(this.currentMonth){
                    return ''
                }else{
                    return 'none'
                }

            },
            isIconShow:function () {
                if(oneOf(this.type+"",["0","-1"])){
                    return "hidden"
                }else{
                    return "visible"
                }
            },
            isTimeShow_Str:function(){
                if(this.isTimeShow == '0'){
                    return "hidden"
                }else{
                    return "visible"
                }
            }
        },
        data () {
            return {
                circleBackgroundColor:{
                    '-1':'transparent',
                    1:"#C2000B",
                    2:"#53D4D2",
                    3:"#CCD500",
                    4:"#C2000B",
                    5:"#C2000B",
                },
                circleText:{
                    '-1':'',
                    1:"退",
                    2:"迟",
                    3:"缺",
                    4:"ALL",
                    5:"异"
                }
            };
        },


    };
</script>
